<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" import="com.zhlb.zfba.common.config.Global" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<%
String PlayServerURL=Global.getConfig("PlayServerURL");
String DownLoadServerURL=Global.getConfig("DownLoadServerURL");

%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<title>胶州市公安局执法办案中心路径管控系统</title>
<link rel="Shortcut Icon" href="${APP_PATH}/static2/images/yeqian.ico" type="image/x-icon" />
<link href="${APP_PATH}/static2/css/style.css" rel="stylesheet"
	type="text/css" />
<link href="${APP_PATH}/static2/css/xilaxuanze.css" rel="stylesheet"
	type="text/css" />
<script src="${APP_PATH}/static2/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
<script type="text/javascript" src="${APP_PATH}/static2/jquery/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${APP_PATH}/static2/js/mycommon.js"></script>
<script type="text/javascript" src="${APP_PATH}/static2/js/jquery.freezeheader.js"></script>
<script type="text/javascript">
	$(function() {
		$("#tableID").freezeHeader({ 'height': '370px'});
		//移到右边
		$('#add').click(function() {
			//先判断是否有选中
			if (!$("#select1 option").is(":selected")) {
				alert("请选择需要移动的选项")
			}
			//获取选中的选项，删除并追加给对方
			else {
				$('#select1 option:selected').appendTo('#select2');
			}
		});
		//移到左边
		$('#remove').click(function() {
			//先判断是否有选中
			if (!$("#select2 option").is(":selected")) {
				alert("请选择需要移动的选项")
			} else {
				$('#select2 option:selected').appendTo('#select1');
			}
		});

		//全部移到右边
		$('#add_all').click(function() {
			//获取全部的选项,删除并追加给对方
			$('#select1 option').appendTo('#select2');
		});

		//全部移到左边
		$('#remove_all').click(function() {
			$('#select2 option').appendTo('#select1');
		});

		//双击选项
		$('#select1').dblclick(function() { //绑定双击事件
			//获取全部的选项,删除并追加给对方
			$("option:selected", this).appendTo('#select2'); //追加给对方
		});

		//双击选项
		$('#select2').dblclick(function() {
			$("option:selected", this).appendTo('#select1');
		});

	});
</script>
<script>
	$(function() {
		$(function() {
			checkboxAction();
		});
	});

</script>
<script>
	$(function() {
		createCanvas()
	});
	//2017年12月28日
	function search(){
	    $("#searchForm").submit();
	    return false;
	}
</script>
<script>
	function ycit()
	{
		var zt = document.getElementById("main").style.display;
		if (zt == "none")
			document.getElementById("main").style.display = "block";
		else
			document.getElementById("main").style.display = "none";
	}
</script>
<style>
.ljlb{
height:370px;
}
</style>
</head>
<body>
	<div class="place">
		<ul class="placeul">
			<li>被询问人路径信息</li>
		</ul>
	</div>
	<div class="rightinfo">
			<!--查询条件   开始 -->
			<c:if test="${policePathLog.isShowQueryControl eq '1'}">
				<div class="tools">
					<form id="searchForm" action="${APP_PATH}/per/policeInfo/checkPolicePathView" method="post">
					<input name="isShowQueryControl" type="hidden" value="1">
				  姓名
				 <input name="policeName" type="text"  maxlength="10" value="${policePathLog.policeName}"/>
				   时间
				  <input name="inTime" type="text" value="${policePathLog.inTime}" maxlength="20" class="input-medium Wdate required" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:true});"/>
				  
				  <img src="${APP_PATH}/static2/images/chaxun.jpg" width="75" height="35" style=" vertical-align:middle" onclick="search(1)"/>
				  <div style=" width:100; height:50; background-color:#000"></div>
				  </form>
			    </div>
		    </c:if>
		    <!--查询条件   开结束-->
			<div class="ljlb">
				<table class="imgtable" id="tableID">
				 <thead>
					<tr class="imgtable1">
						<th width="60px;">序号</th>
						<th width="60px;">选择</th>
						<td width="10%">姓名</td>
						<td width="20%">进入时间</td>
						<td width="20%">离开时间</td>
						<td width="10%">停留时间</td>
						<td width="15%">地点</td>
						<td width="">关联摄像头</td>
					</tr>
					</thead>
					<tbody>
					<c:forEach items="${policePathLogList}" var="policePathLog" varStatus="status">
						<tr>
						<td>${status.index + 1}</td>
							<td class="imgtd">
								<input type="checkbox" name="singleSelectChk">
								<input type="hidden" id="dataId${status.index}" value="${policePathLog.logGUID}">
								<input type="hidden" id="XmlStrId${status.index}" value="${policePathLog.xmlData}">
								
							</td>
							<td>${policePathLog.policeName}</td>
							<td>${policePathLog.inTime}</td>
							<td>${policePathLog.outTime}</td>
							<td>${policePathLog.staySeconds}</td>
							<td>${policePathLog.linkPostion }</td>
							<td>${policePathLog.linkCam1 }${empty policePathLog.linkCam2?"":","}${policePathLog.linkCam2}${empty policePathLog.linkCam3?"":","}${policePathLog.linkCam3}</td>	
						</tr>
					</c:forEach>
					</tbody>
				</table>
			</div>
			<div
				style="float: left; background-color: #a9daff; width: 100%; height: 40px; line-height: 40px; font: '方正幼线简体', '宋体'; font-size: 12px; padding-left: 15px">
				<form name="form1" method="post" action="">
					<input type="checkbox" name="checkbox5" id="allSltChk"> 
					<labelfor="checkbox5"></label> 
					全选 <input type="checkbox"name="checkbox6" id="allRevesalChk"> 
					<label for="checkbox6"></label>
					反选 <input type="checkbox" name="checkbox7" id="allCancleChk">
					<label for="checkbox7"></label> 无&nbsp;&nbsp;
					<input type="button" value="播放" class="btn btnPlay"  onclick="SendXMLToOtherServer('<%=PlayServerURL%>')">
					<a onclick="ycit()"><img src="${APP_PATH}/static2/images/i05.png" width="25"
						height="25" style="vertical-align: middle" />&nbsp;图标形式查看</a>
				</form>
			</div>
			<!-- 统计图表-->
			<div id="main"
				style="text-align:left;  overflow:auto; clear: both; width: 100%; background-color: #fff; display: none">
					<canvas id="myCanvas" width="${canvasWidth}" height="200"
						style="border:0px solid #d3d3d3; ">
						 您的浏览器不支持 HTML5 canvas标签。
					 </canvas>
				<script>
				function createCanvas(){
				var policePathLogListJson =${policePathLogListJson};
				var c = document.getElementById("myCanvas");
				//c.style.width=divlength;
				var ctx = c.getContext("2d");
				ctx.beginPath();
				ctx.moveTo(10, 62);
				ctx.font = "14px Arial"
				var lineBeginPosLineX=10;
				var Text1startPos=0;
				var Text1EndPos;
				var Text2EndPos;
				var Text3EndPos;
				var lineEndPosY;
				for(var i=0;i<policePathLogListJson.length;i++){
					var policePathLog=policePathLogListJson[i];
					if(i+1!=1){
					lineEndPosY=((i)%2==0?62:112);
					lineBeginPosLineX+=50;
					ctx.lineTo(lineBeginPosLineX, lineEndPosY);
					}
					 //文本1
					Text1EndPos=(i%2 ==0?25:130);
					ctx.fillText(policePathLog.linkPostion, Text1startPos, Text1EndPos);//地点
					//文本2
					 Text2EndPos=(i%2 ==0?40:145);
					ctx.fillText(policePathLog.inTime,Text1startPos, Text2EndPos);//时间*/
					Text3EndPos =(i%2 ==0?55:160);
					ctx.fillText(policePathLog.staySeconds,Text1startPos, Text3EndPos);//停留时间
					Text1startPos+=50;  
				}
					ctx.strokeStyle = "red";
					ctx.stroke();
				var c2 = document.getElementById("myCanvas");
				var ctx2 = c2.getContext("2d");
				var circleX=10;
				var circleY=0
				
				for(var i=0;i<policePathLogListJson.length;i++){
					ctx2.beginPath();
					circleY=(i%2 ==0?62:112);
					ctx2.arc(circleX, circleY, 5, 0, Math.PI * 2, true);
					circleX+=50
					ctx2.fillStyle = "red";
					ctx2.fill();
				}
				}
				</script>
			</div>
		</div>

</body>
</html>
